<template>
  <div>
    <input type="text" v-model="weblink" class="input" />
    <button @click="show">展示二维码</button>
    <button @click="clear">清除二维码</button>
    <div ref="qrcodeDom"></div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      weblink: 'https://www.npmjs.com/package/qrcodejs2',
    }
  },
  methods: {
    // 生成二维码
    MakeQrcode() {
      new QRCode(this.$refs.qrcodeDom, {
        text: this.weblink, // 扫码后页面地址
        width: 128, // 二维码宽度
        height: 128, // 二维码高度
        colorDark: '#000000', // 二维码颜色
        colorLight: '#ffffff', // 背景颜色
        correctLevel: QRCode.CorrectLevel.H, // 校正水准
      })
    },
    // 清除二维码
    clear() {
      this.$refs.qrcodeDom.innerHTML = ''
    },
    // 展示二维码
    show() {
      this.$nextTick(() => {
        this.MakeQrcode()
      })
    },
  },
}
</script>

<style scoped>
.input {
  width: 90vw;
  height: 0.3rem;
}
</style>
